<!DOCTYPE html><html lang="zh-Hans"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta name="description" content="vue iframe重加载问题解决"><meta name="keywords" content="iframe"><meta name="author" content="晟松"><meta name="copyright" content="晟松"><title>vue iframe重加载问题解决 | 晟松</title><link rel="shortcut icon" href="/logo.png"><link rel="stylesheet" href="/css/index.css?version=1.9.0"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css?version=1.9.0"><meta name="format-detection" content="telephone=no"><meta http-equiv="x-dns-prefetch-control" content="on"><link rel="dns-prefetch" href="https://cdn.jsdelivr.net"><link rel="dns-prefetch" href="https://hm.baidu.com"><script>var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?c34d81d53341febe06a155941e2df16d";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();</script><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><script>var GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: {"path":"search.xml","languages":{"hits_empty":"找不到您查询的内容:${query}"}},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  hexoVersion: '5.4.0'
} </script><meta name="generator" content="Hexo 5.4.0"></head><body><i class="fa fa-arrow-right" id="toggle-sidebar" aria-hidden="true"></i><div id="sidebar" data-display="true"><div class="toggle-sidebar-info text-center"><span data-toggle="切换文章详情">切换站点概览</span><hr></div><div class="sidebar-toc"><div class="sidebar-toc__title">目录</div><div class="sidebar-toc__progress"><span class="progress-notice">你已经读了</span><span class="progress-num">0</span><span class="progress-percentage">%</span><div class="sidebar-toc__progress-bar"></div></div><div class="sidebar-toc__content"><ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%97%AE%E9%A2%98%E6%8F%8F%E8%BF%B0"><span class="toc-number">1.</span> <span class="toc-text">问题描述</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%A7%A3%E5%86%B3%E6%80%9D%E8%B7%AF"><span class="toc-number">2.</span> <span class="toc-text">解决思路</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A0%B8%E5%BF%83%E4%BB%A3%E7%A0%81"><span class="toc-number">3.</span> <span class="toc-text">核心代码</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%85%B6%E4%BB%96%E9%97%AE%E9%A2%98"><span class="toc-number">4.</span> <span class="toc-text">其他问题</span></a></li></ol></div></div><div class="author-info hide"><div class="author-info__avatar text-center"><img src="/img/avatar.png"></div><div class="author-info__name text-center">晟松</div><div class="author-info__description text-center">晟松的博客</div><div class="follow-button"><a target="_blank" rel="noopener" href="https://gitee.com/cheng_song">Gitee</a></div><hr><div class="author-info-articles"><a class="author-info-articles__archives article-meta" href="/archives"><span class="pull-left">文章</span><span class="pull-right">52</span></a><a class="author-info-articles__tags article-meta" href="/tags"><span class="pull-left">标签</span><span class="pull-right">45</span></a></div></div></div><div id="content-outer"><div id="top-container" style="background-image: url(/img/blog-bg.jpg)"><div id="page-header"><span class="pull-left"> <a id="site-name" href="/">晟松</a></span><i class="fa fa-bars toggle-menu pull-right" aria-hidden="true"></i><span class="pull-right menus">   <a class="site-page" href="/">Home</a><a class="site-page" href="/archives">Archives</a><a class="site-page" href="/tags">Tags</a><a class="site-page" href="/categories">Categories</a></span><span class="pull-right"><a class="site-page social-icon search"><i class="fa fa-search"></i><span> 搜索</span></a></span></div><div id="post-info"><div id="post-title">vue iframe重加载问题解决</div><div id="post-meta"><time class="post-meta__date"><i class="fa fa-calendar" aria-hidden="true"></i> 2023-03-15</time><div class="post-meta-wordcount"><span>字数总计: </span><span class="word-count">2k</span><span class="post-meta__separator">|</span><span>阅读时长: 7 分钟</span></div></div></div></div><div class="layout" id="content-inner"><article id="post"><div class="article-container" id="post-content"><h3 id="问题描述"><a href="#问题描述" class="headerlink" title="问题描述"></a>问题描述</h3><p>此问题为对v22 vue3系统的问题。</p>
<p>主要为，v22系统中存在页签这一种东西，而一个页签之中可能存在着一些地图之类的iframe界面。而在vue中，我们一般使用keep-alive与vouter-view来保持一个页面的状态，让其可以切换后不进行重走生命周期。</p>
<p>但是，对于iframe界面来说，这个是不行的，vue中只能缓存自己的数据，即一个iframe地址，而处理不到iframe内部加载的数据，每次切换回来，iframe就会重新加载一次，之前的数据也会丢失，本文就是处理这个问题。</p>
<p><img src="https://gitee.com/cheng_song/picgo-img/raw/master/img/image-20230318155552180.png" alt="image-20230318155552180"></p>
<p>代码仓库地址：<a target="_blank" rel="noopener" href="http://192.168.101.70:8000/csgl/frontend/star-scales-v22-vue.git">http://192.168.101.70:8000/csgl/frontend/star-scales-v22-vue.git</a></p>
<h3 id="解决思路"><a href="#解决思路" class="headerlink" title="解决思路"></a>解决思路</h3><p>思路：预加载路由页面 + v-show展示。把那些有iframe的路由先渲染出现，在切换页签的时候，使用v-show进行隐藏和显示，这样iframe里面的数据就不会重新加载了</p>
<h3 id="核心代码"><a href="#核心代码" class="headerlink" title="核心代码"></a>核心代码</h3><p>1.路由定义的时候直接引入对应组件</p>
<p>使用懒加载会出现加载不出来页面的情况</p>
<p>routes.ts</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">import</span> evaluationContentFormDesignComp <span class="keyword">from</span> <span class="string">&#x27;@/components/linglong/form-design/index.vue&#x27;</span>;</span><br><span class="line">   </span><br><span class="line">&#123;</span><br><span class="line">        <span class="attr">name</span>: <span class="string">&#x27;evaluationContent&#x27;</span>,</span><br><span class="line">        <span class="attr">path</span>: <span class="string">&#x27;/evaluationContent&#x27;</span>,</span><br><span class="line">        <span class="attr">meta</span>: &#123;</span><br><span class="line">            <span class="attr">title</span>: <span class="string">&#x27;评价内容&#x27;</span>,</span><br><span class="line">            <span class="attr">menu</span>: <span class="literal">true</span>,</span><br><span class="line">            <span class="attr">tab</span>: <span class="literal">true</span>,</span><br><span class="line">            <span class="attr">tabClosable</span>: <span class="literal">true</span>,</span><br><span class="line">            <span class="attr">tabFixed</span>: <span class="literal">true</span>,</span><br><span class="line">            <span class="attr">keepName</span>: <span class="string">&#x27;evaluationContent&#x27;</span>,</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">component</span>: <span class="function">() =&gt;</span> <span class="keyword">import</span>(<span class="string">&#x27;@/pages/IndustryEvaluation/evaluationContent/index.vue&#x27;</span>),</span><br><span class="line">        <span class="attr">children</span>: [</span><br><span class="line">            &#123;</span><br><span class="line">                <span class="attr">name</span>: <span class="string">&#x27;evaluationContentFormDesign&#x27;</span>,</span><br><span class="line">                <span class="attr">path</span>: <span class="string">&#x27;/evaluationContentFormDesign/:pageId&#x27;</span>,</span><br><span class="line">                <span class="attr">meta</span>: &#123;</span><br><span class="line">                    <span class="attr">title</span>: <span class="string">&#x27;表单设计&#x27;</span>,</span><br><span class="line">                    <span class="attr">tab</span>: <span class="literal">true</span>,</span><br><span class="line">                    <span class="attr">tabClosable</span>: <span class="literal">true</span>,</span><br><span class="line">                    <span class="attr">tabFixed</span>: <span class="literal">true</span>,</span><br><span class="line">                    <span class="attr">keepName</span>: <span class="string">&#x27;evaluationContentFormDesign&#x27;</span>,</span><br><span class="line">                    <span class="comment">/** 使用v-show控制iframe页面的显隐，而实现iframe界面不进行重新加载 */</span></span><br><span class="line">                    <span class="attr">iframeKeepAlive</span>: <span class="literal">true</span>,</span><br><span class="line">                    <span class="attr">iframeComponent</span>: evaluationContentFormDesignComp,</span><br><span class="line">                &#125;,</span><br><span class="line">                <span class="attr">component</span>: <span class="function">() =&gt;</span> <span class="keyword">import</span>(<span class="string">&#x27;@/components/linglong/form-design/index.vue&#x27;</span>),</span><br><span class="line">            &#125;,</span><br><span class="line">        ],</span><br><span class="line">    &#125;,</span><br></pre></td></tr></table></figure>



<p>layout.vue</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">/** iframe路由切换缓存使用 */</span><br><span class="line">const &#123; allShowIframePage, iframePageKeepAliveShow, showNowIframeRoute &#125; = useLinglongRouteKeepAliveHook();</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">&lt;section class=&quot;c-layout-content&quot;&gt;</span><br><span class="line">    &lt;main class=&quot;c-layout-content-main&quot;&gt;</span><br><span class="line">        &lt;router-view v-slot=&quot;&#123; Component, route &#125;&quot;&gt;</span><br><span class="line">            &lt;template v-if=&quot;Component&quot;&gt;</span><br><span class="line">                &lt;transition name=&quot;zt-transition-fade&quot;&gt;</span><br><span class="line">                    &lt;keep-alive :include=&quot;keepAliveIncludeCompName&quot;&gt;</span><br><span class="line">            &lt;!-- 注意这里的v-if，不让设置了iframeKeepAlive的路由在这里渲染 --&gt;</span><br><span class="line">                        &lt;component</span><br><span class="line">                            :is=&quot;Component&quot;</span><br><span class="line">                            v-if=&quot;!iframePageKeepAliveShow&quot;</span><br><span class="line">                            :key=&quot;route.meta?.keepUsePath ? route.path : route.fullPath&quot;</span><br><span class="line">                        /&gt;</span><br><span class="line">                    &lt;/keep-alive&gt;</span><br><span class="line">                &lt;/transition&gt;</span><br><span class="line">            &lt;/template&gt;</span><br><span class="line">            &lt;!-- iframe的一些界面，使用v-show进行存储，而不触发iframe重新渲染 --&gt;</span><br><span class="line">            &lt;div</span><br><span class="line">                v-for=&quot;iframeRoute in allShowIframePage&quot;</span><br><span class="line">                v-show=&quot;showNowIframeRoute(iframeRoute.fullPath)&quot;</span><br><span class="line">                :key=&quot;iframeRoute.fullPath&quot;</span><br><span class="line">                class=&quot;width-100 height-100 border-none&quot;</span><br><span class="line">            &gt;</span><br><span class="line">                &lt;transition name=&quot;zt-transition-fade&quot;&gt;</span><br><span class="line">                    &lt;component :is=&quot;iframeRoute.meta?.iframeComponent&quot; :key=&quot;iframeRoute.fullPath&quot; /&gt;</span><br><span class="line">                &lt;/transition&gt;</span><br><span class="line">            &lt;/div&gt;</span><br><span class="line">        &lt;/router-view&gt;</span><br><span class="line">    &lt;/main&gt;</span><br><span class="line">    &lt;zt-layout-navs&gt;&lt;/zt-layout-navs&gt;</span><br><span class="line">&lt;/section&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>



<p><strong>重点</strong></p>
<p>在这里先获取到所有需要v-show控制的界面（即allIframePages），然后在从navStore中判断出目前有哪一些iframe界面需要渲染，然后添加至allShowIframePage中，最终v-for进行渲染。</p>
<p>use-linglong-route-keep-alive-hook.ts</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="comment">/* eslint-diable */</span></span><br><span class="line"><span class="keyword">import</span> &#123; appRoutes &#125; <span class="keyword">from</span> <span class="string">&#x27;@/router&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; useNavStore &#125; <span class="keyword">from</span> <span class="string">&#x27;@ega/hooks&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; computed, ref, watch &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; useRoute, useRouter &#125; <span class="keyword">from</span> <span class="string">&#x27;vue-router&#x27;</span>;</span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@description</span>: 主要用于控制iframe路由在路由切换时的缓存</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@return <span class="type">&#123;*&#125;</span></span></span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> <span class="function"><span class="keyword">function</span> <span class="title">useLinglongRouteKeepAliveHook</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">const</span> route = useRoute();</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> router = useRouter();</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> navStore = useNavStore();</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** 是否当前为iframe界面的展示 */</span></span><br><span class="line">    <span class="keyword">const</span> iframePageKeepAliveShow = ref(<span class="literal">false</span>);</span><br><span class="line">    watch(</span><br><span class="line">        <span class="function">() =&gt;</span> route.fullPath,</span><br><span class="line">        <span class="function">() =&gt;</span> &#123;</span><br><span class="line">            <span class="keyword">if</span> (route.meta.iframeKeepAlive) &#123;</span><br><span class="line">                iframePageKeepAliveShow.value = <span class="literal">true</span>;</span><br><span class="line">            &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">                iframePageKeepAliveShow.value = <span class="literal">false</span>;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">            <span class="attr">immediate</span>: <span class="literal">true</span>,</span><br><span class="line">        &#125;,</span><br><span class="line">    );</span><br><span class="line">    <span class="comment">/** 所有的iframe路由界面 */</span></span><br><span class="line">    <span class="keyword">const</span> allIframePages = appRoutes.filter(<span class="function">(<span class="params">appRoute</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> appRoute.meta?.iframeKeepAlive;</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="comment">/**</span></span><br><span class="line"><span class="comment">     * <span class="doctag">@description</span>: 获得第一次进入详情界面时的详情iframe路由，如果是iframe路由的话</span></span><br><span class="line"><span class="comment">     * <span class="doctag">@return <span class="type">&#123;*&#125;</span></span></span></span><br><span class="line"><span class="comment">     */</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">getNowRouteComp</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="keyword">let</span> currentRoute = router.currentRoute;</span><br><span class="line">        <span class="keyword">if</span> (iframePageKeepAliveShow.value) &#123;</span><br><span class="line">            <span class="keyword">return</span> allIframePages.filter(<span class="function">(<span class="params">iframeRoute</span>) =&gt;</span> &#123;</span><br><span class="line">                <span class="keyword">return</span> iframeRoute.name === currentRoute.value.name;</span><br><span class="line">            &#125;);</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> [];</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** 最终进行渲染的iframe动态路由，从顶部的页签navs进行筛选 */</span></span><br><span class="line">    <span class="keyword">const</span> allShowIframePage = computed(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">return</span> navStore.navs?.filter(<span class="function">(<span class="params">topCardNav</span>) =&gt;</span> &#123;</span><br><span class="line">            <span class="keyword">return</span> allIframePages.find(<span class="function">(<span class="params">allIframePage</span>) =&gt;</span> &#123;</span><br><span class="line">                <span class="keyword">return</span> allIframePage.name === topCardNav.name;</span><br><span class="line">            &#125;);</span><br><span class="line">        &#125;);</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">    <span class="comment">/**</span></span><br><span class="line"><span class="comment">     * <span class="doctag">@description</span>: 是否展示这个路由的渲染，即v-show的结果</span></span><br><span class="line"><span class="comment">     * <span class="doctag">@param <span class="type">&#123;string&#125;</span> </span>fullPath 路由path，根据渲染路由进行判断</span></span><br><span class="line"><span class="comment">     * <span class="doctag">@return <span class="type">&#123;*&#125;</span></span></span></span><br><span class="line"><span class="comment">     */</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">showNowIframeRoute</span>(<span class="params">fullPath: string</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> route.fullPath === fullPath;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> &#123; allShowIframePage, iframePageKeepAliveShow, showNowIframeRoute &#125;;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>



<h3 id="其他问题"><a href="#其他问题" class="headerlink" title="其他问题"></a>其他问题</h3><p>但是在我们的系统使用中，这些使用到的页面可能是动态路由，而动态路由就存在一个问题，组件复用</p>
<p><img src="https://gitee.com/cheng_song/picgo-img/raw/master/img/image-20230318160141088.png" alt="image-20230318160141088"></p>
<p><a target="_blank" rel="noopener" href="https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#%E5%93%8D%E5%BA%94%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0%E7%9A%84%E5%8F%98%E5%8C%96">带参数的动态路由匹配 | Vue Router (vuejs.org)</a></p>
<p>一般来说，这个组件复用的问题用watch route或者beforeUpdate就行了，从一个列表页面跳到一个动态路由详情页面watch一些路由参数，然后更新就可以了，例：</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line">/ 获取id和数据，注意这里使用的是watch来监听和获取数据</span><br><span class="line"><span class="keyword">const</span> stopWatch = watch(</span><br><span class="line">    <span class="function">() =&gt;</span> route.params,</span><br><span class="line">    <span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">if</span> (!isNil(route.params.pageId)) &#123;</span><br><span class="line">            initData();</span><br><span class="line">            <span class="comment">// stopWatch之类的，一定要取消监听，不然每一个界面都会重新watch到这个变化，然后initData</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">        <span class="attr">immediate</span>: <span class="literal">true</span>,</span><br><span class="line">        <span class="attr">deep</span>: <span class="literal">true</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">);</span><br></pre></td></tr></table></figure>

<p>到目前为止都还行。</p>
<p>但是当从一个iframe界面跳转到另一个iframe界面后，问题就出来了。</p>
<p>这是监听代码</p>
<figure class="highlight js"><table><tr><td class="code"><pre><span class="line"><span class="keyword">const</span> stopWatch = watch(</span><br><span class="line">    <span class="function">() =&gt;</span> route.params,</span><br><span class="line">    <span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">if</span> (!isNil(route.params.pageId)) &#123;</span><br><span class="line">            initData();</span><br><span class="line">            <span class="comment">// 去除监听</span></span><br><span class="line">            nextTick(<span class="function">()=&gt;</span>stopWatch())</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">        <span class="attr">immediate</span>: <span class="literal">true</span>,</span><br><span class="line">        <span class="attr">deep</span>: <span class="literal">true</span>,</span><br><span class="line">    &#125;,</span><br><span class="line">);</span><br></pre></td></tr></table></figure>

<p>这是一个详情页面</p>
<p><img src="https://gitee.com/cheng_song/picgo-img/raw/master/img/image-20230318171806245.png" alt="image-20230318171806245"></p>
<p>它还可以点击列表直接跳转到其他详情页面。</p>
<p>但是在<strong>直接进行详情界面</strong>，再次进行点击跳转到其他iframe界面的时候，这个东西有个问题就是<strong>跳转到的界面获取的数据是之前的页面的数据</strong>。</p>
<p>如目前是武汉市的详情</p>
<p><img src="https://gitee.com/cheng_song/picgo-img/raw/master/img/image-20230318172153852.png" alt="image-20230318172153852"></p>
<p>点击了江北</p>
<p><img src="https://gitee.com/cheng_song/picgo-img/raw/master/img/image-20230318172400803.png" alt="image-20230318172400803"></p>
<p>跳转后的网络获取，可以发现这里获取了两次数据，按道理只会获取到一次数据的</p>
<p><img src="https://gitee.com/cheng_song/picgo-img/raw/master/img/image-20230318172756245.png" alt="image-20230318172756245"></p>
<p>目前测试出来的问题就是在监听router.params的时候，获取到的数据不会实时的刷新，比如从动态路由url</p>
<p>detail/122 -&gt; detail/123的时候。我们期望的是122的detail不进行任何操作，123的detail去网络加载数据。但是目前我在公司电脑与我的电脑上面测试的情形有<strong>以下3种</strong></p>
<ul>
<li>正常，按照我们的期望进行加载</li>
<li>不正常，两个页面全都在加载数据</li>
<li>不正常，123的detail进行了网络加载，但是加载的数据是122的，即两个页面url不同，但展示的数据是一样的</li>
</ul>
<p>看到这三个不一样的结果，我人都傻了。</p>
<p>结果1：想不到啥方式正常了，这个是在我自己电脑上测的，不能是浏览器和node版本啥的问题吧。下面两个是在公司电脑测的</p>
<p>结果2：最开始是看着stopWatch没有运行的感觉，两个页面都在watch这个route.params的变化，然后网络加载数据</p>
<p>结果3：猜测是因为直接加载的路由，而不是懒加载，所以路由复用的时候直接把原来的数据给拿过去了，而watch的route.params还是原来的数据，即122的，所以展示的一样了。这一点我很奇怪。</p>
<p><strong>最终的解决方案</strong></p>
<p>目前我们的页面都是与顶部的页签相绑定的，而顶部的页签是watch route.path进行变化的（这一个过程会在我们页面加载之前），然后在我们的iframe页面中直接获取页签的数据，这个数据是符合我们预期的，然后后面也不要搞什么watch操作了，也就不会再加载数据了</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">import &#123; useNavStore &#125; from &#x27;@ega/hooks&#x27;;</span><br><span class="line">import &#123; storeToRefs &#125; from &#x27;pinia&#x27;;</span><br><span class="line">// 顶部tab keep-alive的路由数据</span><br><span class="line">const navStore = useNavStore();</span><br><span class="line">const &#123; navs, nav &#125; = storeToRefs(navStore);</span><br><span class="line">/**</span><br><span class="line"> * 获取对象id和数据，注意这里使用的从系统的nav中获取数据，而不是route，因为动态路由组件复用和iframe keep-alive的奇怪原因，</span><br><span class="line"> * 会导致获取id错误，无法实时获取，所以改成了这种方式处理</span><br><span class="line"> */</span><br><span class="line">targetId.value = nav.value?.params?.id;</span><br><span class="line">getTargetDetail();</span><br></pre></td></tr></table></figure>

</div></article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="mailto:undefined">晟松</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://chengsong.info/2023/03/15/vue-iframe重加载问题解决/">https://chengsong.info/2023/03/15/vue-iframe重加载问题解决/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://chengsong.info">晟松</a>！</span></div></div><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/iframe/">iframe</a></div><nav id="pagination"><div class="prev-post pull-left"><a href="/2023/03/15/vue-contentEditable-%E4%B8%8E-selection-range/"><i class="fa fa-chevron-left">  </i><span>vue contentEditable 与 selection&amp;range</span></a></div><div class="next-post pull-right"><a href="/2022/12/10/js%E5%B8%B8%E7%94%A8%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/"><span>js常用设计模式</span><i class="fa fa-chevron-right"></i></a></div></nav></div></div><footer class="footer-bg" style="background-image: url(/img/blog-bg.jpg)"><div class="layout" id="footer"><div class="copyright">&copy;2020 - 2023 By 晟松</div><div class="framework-info"><span>驱动 - </span><a target="_blank" rel="noopener" href="http://hexo.io"><span>Hexo</span></a><span class="footer-separator">|</span><span>主题 - </span><a target="_blank" rel="noopener" href="https://github.com/Molunerfinn/hexo-theme-melody"><span>Melody</span></a></div><div class="icp"><a target="_blank" rel="noopener" href="http://www.beian.miit.gov.cn/"><span>湘ICP备2020021729号</span></a></div><div class="busuanzi"><script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><span id="busuanzi_container_page_pv"><i class="fa fa-file"></i><span id="busuanzi_value_page_pv"></span><span></span></span></div></div></footer><i class="fa fa-arrow-up" id="go-up" aria-hidden="true"></i><script src="https://cdn.jsdelivr.net/npm/animejs@latest/anime.min.js"></script><script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@latest/velocity.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-ui-pack@latest/velocity.ui.min.js"></script><script src="/js/utils.js?version=1.9.0"></script><script src="/js/fancybox.js?version=1.9.0"></script><script src="/js/sidebar.js?version=1.9.0"></script><script src="/js/copy.js?version=1.9.0"></script><script src="/js/fireworks.js?version=1.9.0"></script><script src="/js/transition.js?version=1.9.0"></script><script src="/js/scroll.js?version=1.9.0"></script><script src="/js/head.js?version=1.9.0"></script><script src="/js/search/local-search.js"></script><script>if(/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) {
  $('#nav').addClass('is-mobile')
  $('footer').addClass('is-mobile')
  $('#top-container').addClass('is-mobile')
}</script><div class="search-dialog" id="local-search"><div class="search-dialog__title" id="local-search-title">本地搜索</div><div id="local-input-panel"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章"></div></div></div><hr><div id="local-search-results"><div id="local-hits"></div><div id="local-stats"><div class="local-search-stats__hr" id="hr"><span>由</span> <a target="_blank" rel="noopener" href="https://github.com/wzpan/hexo-generator-search" style="color:#49B1F5;">hexo-generator-search</a>
 <span>提供支持</span></div></div></div><span class="search-close-button"><i class="fa fa-times"></i></span></div><div class="search-mask"></div></body></html>